import { Divider } from 'antd'
import Code from '@/components/Code'

const View: React.FC = () => {

    return (
        <>
            <Divider orientation="left">useReducer</Divider>
            <p>对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，你可以将组件的所有状态更新逻辑整合到一个外部函数中，这个函数叫作 reducer。</p>

        <Code>{str1}</Code>

            <p>感觉：useReducer类似于Vuex</p>

        </>

    )
}

export default View



const str1 = `function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action: ' + action.type);
    }
  }
}`